<template>
  <div id="matr-this-year">
    <div class="matr-this-year-title">耗材总量消耗月度趋势</div>
    <dv-charts :option="option" style="margin-top:-20px;" />
  </div>
</template>

<script>
export default {
  name: 'MatrThisYear',
  data() {
    return {
      option: {}
    }
  },
  methods: {
    async createData() {
      let data = []
      await this.$ajax.get('/finance/bill/findThisYearMaterialUse').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本年耗材消耗月度趋势发生错误：${resp.msg}`)
          return
        }
        if (resp.data.length > 0) {
          let respData = resp.data
          let date = new Date()
          for (let i = 1; i <= 12; i += 1) {
            let dateMonth = ''
            let dateValue = ''
            if (i < 10) {
              dateMonth = date.getFullYear() + '-0' + i
            } else {
              dateMonth = date.getFullYear() + '-' + i
            }
            for (let j = 0; j < respData.length; j += 1) {
              if (respData[j].gmtCreate.indexOf(dateMonth) > -1) {
                dateValue = +(respData[j].amount / 10000).toFixed(2)
                break
              }
            }
            data.push(dateValue)
          }
          this.option = {
            // color: ['#01AAED', '#009688', '#FF5722'],
            color: ['#FF5722'],
            legend: {
              orient: 'verticals',
              selectAble: false,
              textStyle: {
                fontSize: 15,
                fill: '#fff'
              },
              data: [
                // {
                //   name: '前年',
                //   color: '#01AAED'
                // },
                // {
                //   name: '去年',
                //   color: '#009688'
                // },
                {
                  name: '今年',
                  color: '#FF5722'
                }
              ]
            },
            xAxis: {
              name: '月份',
              data: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
              ],
              nameTextStyle: {
                fill: '#fff',
                fontSize: 15
              },
              axisLabel: {
                style: {
                  fill: '#fff',
                  fontSize: 14
                }
              }
            },
            yAxis: {
              name: '金额(万元)',
              data: 'value',
              min: 0,
              nameTextStyle: {
                fill: '#fff',
                fontSize: 15
              },
              axisLabel: {
                style: {
                  fill: '#fff',
                  fontSize: 14
                }
              }
            },
            series: [
              {
                name: '',
                data,
                type: 'line',
                stack: 'a',
                fill: {
                  show: true
                },
                label: {
                  show: true,
                  style: {
                    fontSize: 14
                  }
                }
              }
              // {
              //   name: '去年',
              //   data: data2,
              //   type: 'line',
              //   stack: 'a',
              //   fill: {
              //     show: true
              //   }
              // },
              // {
              //   name: '今年',
              //   data: data3,
              //   type: 'line',
              //   stack: 'a',
              //   fill: {
              //     show: true
              //   }
              // }
            ]
          }
        }
      })
    }
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 3600000)
  }
}
</script>

<style lang="scss">
#matr-this-year {
  height: 38%;
  margin-bottom: 10px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;

  .matr-this-year-title {
    height: 10%;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }
}
</style>
